<template>
  <div class="header-cart">
    <router-link to="#">
      <IconifyIcon icon="grommet-icons:cart" class="cart-icon" />
      <em>20</em>
    </router-link>
    <!-- 购物车列表 -->
    <div class="cart-box">
      <div>
        <ul class="cart-list">
          <li class="cart-list__item">
            <router-link to="#">
              <img
                src="https://yanxuan-item.nosdn.127.net/ead73130f3dbdb3cabe1c7b0f4fd3d28.png"
                alt=""
              />
              <div class="intro">
                <p>
                  和手足干裂说拜拜和手足干裂说拜拜和手足干裂说拜拜
                  ingrams手足皲裂修复霜
                </p>
                <p>颜色：修复绿瓶 容量：1123123123150ml</p>
              </div>
              <div class="price">
                <p>&yen;45.00</p>
                <p>x2</p>
              </div>
            </router-link>
          </li>
          <li class="cart-list__item">
            <router-link to="#">
              <img
                src="https://yanxuan-item.nosdn.127.net/ead73130f3dbdb3cabe1c7b0f4fd3d28.png"
                alt=""
              />
              <div class="intro">
                <p>
                  和手足干裂说拜拜和手足干裂说拜拜和手足干裂说拜拜
                  ingrams手足皲裂修复霜
                </p>
                <p>颜色：修复绿瓶 容量：1123123123150ml</p>
              </div>
              <div class="price">
                <p>&yen;45.00</p>
                <p>x2</p>
              </div>
            </router-link>
          </li>
          <li class="cart-list__item">
            <router-link to="#">
              <img
                src="https://yanxuan-item.nosdn.127.net/ead73130f3dbdb3cabe1c7b0f4fd3d28.png"
                alt=""
              />
              <div class="intro">
                <p>
                  和手足干裂说拜拜和手足干裂说拜拜和手足干裂说拜拜
                  ingrams手足皲裂修复霜
                </p>
                <p>颜色：修复绿瓶 容量：1123123123150ml</p>
              </div>
              <div class="price">
                <p>&yen;45.00</p>
                <p>x2</p>
              </div>
            </router-link>
          </li>
          <li class="cart-list__item">
            <router-link to="#">
              <img
                src="https://yanxuan-item.nosdn.127.net/ead73130f3dbdb3cabe1c7b0f4fd3d28.png"
                alt=""
              />
              <div class="intro">
                <p>
                  和手足干裂说拜拜和手足干裂说拜拜和手足干裂说拜拜
                  ingrams手足皲裂修复霜
                </p>
                <p>颜色：修复绿瓶 容量：1123123123150ml</p>
              </div>
              <div class="price">
                <p>&yen;45.00</p>
                <p>x2</p>
              </div>
            </router-link>
          </li>
          <li class="cart-list__item">
            <router-link to="#">
              <img
                src="https://yanxuan-item.nosdn.127.net/ead73130f3dbdb3cabe1c7b0f4fd3d28.png"
                alt=""
              />
              <div class="intro">
                <p>
                  和手足干裂说拜拜和手足干裂说拜拜和手足干裂说拜拜
                  ingrams手足皲裂修复霜
                </p>
                <p>颜色：修复绿瓶 容量：1123123123150ml</p>
              </div>
              <div class="price">
                <p>&yen;45.00</p>
                <p>x2</p>
              </div>
            </router-link>
          </li>
          <li class="cart-list__item">
            <router-link to="#">
              <img
                src="https://yanxuan-item.nosdn.127.net/ead73130f3dbdb3cabe1c7b0f4fd3d28.png"
                alt=""
              />
              <div class="intro">
                <p>
                  和手足干裂说拜拜和手足干裂说拜拜和手足干裂说拜拜
                  ingrams手足皲裂修复霜
                </p>
                <p>颜色：修复绿瓶 容量：1123123123150ml</p>
              </div>
              <div class="price">
                <p>&yen;45.00</p>
                <p>x2</p>
              </div>
            </router-link>
          </li>
          <li class="cart-list__item">
            <router-link to="#">
              <img
                src="https://yanxuan-item.nosdn.127.net/ead73130f3dbdb3cabe1c7b0f4fd3d28.png"
                alt=""
              />
              <div class="intro">
                <p>
                  和手足干裂说拜拜和手足干裂说拜拜和手足干裂说拜拜
                  ingrams手足皲裂修复霜
                </p>
                <p>颜色：修复绿瓶 容量：1123123123150ml</p>
              </div>
              <div class="price">
                <p>&yen;45.00</p>
                <p>x2</p>
              </div>
            </router-link>
          </li>
          <li class="cart-list__item">
            <router-link to="#">
              <img
                src="https://yanxuan-item.nosdn.127.net/ead73130f3dbdb3cabe1c7b0f4fd3d28.png"
                alt=""
              />
              <div class="intro">
                <p>
                  和手足干裂说拜拜和手足干裂说拜拜和手足干裂说拜拜
                  ingrams手足皲裂修复霜
                </p>
                <p>颜色：修复绿瓶 容量：1123123123150ml</p>
              </div>
              <div class="price">
                <p>&yen;45.00</p>
                <p>x2</p>
              </div>
            </router-link>
          </li>
        </ul>
        <div class="cart-footer">
          <div class="total">
            <p class="number">共&nbsp;4&nbsp;件商品</p>
            <p class="amount">&yen;746</p>
          </div>
          <div class="tocart">去购物车结算</div>
        </div>
      </div>
    </div>
  </div>
</template>

<script setup lang="ts">
defineOptions({
  name: 'Cart'
})
</script>

<style lang="scss" scoped>
.header-cart {
  position: relative;
  margin-left: 10px;

  &:hover {
    .cart-box {
      opacity: 1;

      > div {
        height: 400px;
        opacity: 1;
      }
    }
  }

  a {
    em {
      position: absolute;
      top: -5px;
      right: -15px;
      padding: 0 6px;
      background-color: #e26237;
      border-radius: 10px;
      color: $basic-white;
      font-size: 12px;
    }
  }

  .cart-icon {
    font-size: 22px;
  }

  .cart-box {
    position: absolute;
    top: 45px;
    right: -15px;
    width: 400px;
    background-color: $basic-white;
    border-radius: 5px;
    opacity: 0;
    filter: drop-shadow(0 0 5px #ccc);
    transition: opacity 0.4s 0.1s;

    > div {
      position: relative;
      overflow: hidden;
      height: 0;
      border-radius: 5px;
      opacity: 0;
      transition:
        height 0.4s,
        opacity 0.4s;

      .cart-list {
        overflow: auto;
        padding: 15px;
        height: 330px;

        &::-webkit-scrollbar {
          width: 5px;
          height: 10px;
        }

        &::-webkit-scrollbar-track {
          background: #f8f8f8;
          border-radius: 2px;
        }

        &::-webkit-scrollbar-thumb {
          background-color: #eee;
          border-radius: 5px;
        }

        &::-webkit-scrollbar-thumb:hover {
          background: #ccc;
        }

        &__item {
          padding: 10px 0;
          border-bottom: solid 1px $bg-gary;

          a {
            display: flex;
            justify-content: space-between;

            img {
              width: 80px;
              height: 80px;
            }

            .intro {
              display: flex;
              flex-direction: column;
              justify-content: space-evenly;
              padding-left: 10px;
              width: 200px;

              p {
                &:first-child {
                  display: -webkit-box;
                  overflow: hidden;
                  -webkit-box-orient: vertical;
                  -webkit-line-clamp: 2;
                  text-overflow: ellipsis;
                }

                &:last-child {
                  overflow: hidden;
                  color: #999;
                  font-size: 14px;
                  text-overflow: ellipsis;
                  text-wrap: nowrap;
                }
              }
            }

            .price {
              display: flex;
              flex-direction: column;
              justify-content: space-evenly;
              width: 100px;
              text-align: center;

              p {
                &:first-child {
                  color: $price-color;
                }

                &:last-child {
                  color: #999;
                }
              }
            }
          }
        }
      }

      .cart-footer {
        position: absolute;
        bottom: 0;
        left: 0;
        display: flex;
        justify-content: space-between;
        align-items: center;
        padding: 0 15px;
        width: 100%;
        height: 70px;
        background-color: #f8f8f8;

        .total {
          .number {
            color: #999;
            font-size: 14px;
          }

          .amount {
            color: $price-color;
            line-height: 28px;
            font-size: 18px;
          }
        }

        .tocart {
          padding: 15px 30px;
          background-color: #e6faf6;
          border: solid 1px $xtx-color;
          border-radius: 5px;
          color: $xtx-color;
          cursor: pointer;
        }
      }
    }

    &::after {
      position: absolute;
      top: -25px;
      right: 15px;
      z-index: -1;
      content: '';
      width: 0;
      height: 0;
      border: 10px solid transparent;
      border-bottom-width: 20px;
      border-bottom-color: $basic-white;
    }
  }
}
</style>
